<template>
  <div class="a_z_userman">
    <a-breadcrumb>
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>系统管理</a-breadcrumb-item>
      <a-breadcrumb-item>角色管理</a-breadcrumb-item>
    </a-breadcrumb>
    <!-- 搜索栏 -->
    <search class="search"></search>
    <!-- 用户管理表格 -->
    <!-- 整体的操作 -->
    <div class="btns">
      <a-button type="primary" icon="user-add">新增</a-button>
      <a-button type="default" icon="edit">修改</a-button>
      <a-button type="danger" icon="delete">删除</a-button>
    </div>
    <a-table :columns="columns" :row-selection="rowSelection" :data-source="data">
      <a slot="status" slot-scope="status">
        <a-tag color="red" v-if="status == 0">已启用</a-tag>
        <a-tag color="red" v-else>未启用</a-tag>
      </a>
      <a slot="action" slot-scope="action">
        <a-button type="link" icon="edit" @click="edit(action)">编辑</a-button>
        <a-divider type="vertical" />
        <a-popconfirm
          title="你确定你要删了他？"
          ok-text="是的"
          cancel-text="算了"
          @confirm="confirm"
          @cancel="cancel"
        >
          <a-button type="link" icon="delete" @click="del(action)">删除</a-button>
        </a-popconfirm>
      </a>
    </a-table>
  </div>
</template>

<script>
import search from '../../components/setting/search.vue'
const columns = [
  {
    title: '角色名称',
    dataIndex: 'rolename',
    key: 'rolename',
    width: 200
  },
  {
    title: '手机号',
    dataIndex: 'phonenum',
    key: 'phonenum',
    width: 200
  },
  {
    title: '当前状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
    width: '100'
  },
  {
    title: '创建时间',
    dataIndex: 'createtime',
    key: 'createtime',
    width: '200'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const data = [
  {
    key: '1',
    rolename: '超级管理员',
    phonenum: 15624079714,
    status: 0,
    createtime: '2020年9月12日'
  }
]
export default {
  components: {
    search
  },
  data () {
    return {
      data,
      columns
    }
  },
  computed: {
    rowSelection () {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            'selectedRows: ',
            selectedRows
          )
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name
          }
        })
      }
    }
  },
  methods: {
    confirm () {
      alert('我确定要删她')
    },
    cancel () {
      alert('算了我心软了')
    }
  }
}
</script>

<style lang='scss' scoped>
.search {
  margin-top: 1em;
}
.btns {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 1em;
  margin-bottom: 1em;
  .ant-btn {
    margin-right: 1em;
  }
}
</style>
